<template>
    <div class="block">
        <!--添加和更新分类的对话框-->
        <el-dialog title="分类信息" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="分类名称">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="分类品牌">
                    <el-select placeholder="请选择品牌" v-model="currentBrand">
                        <el-option v-for="brand in brands" :label="brand.name" :value="brand">
                        </el-option>
                    </el-select>
                    <p v-for="b in form.selectedBrands">{{b.name}}</p>
                    <el-button @click="selectBrand">添加品牌</el-button>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveCategory">确 定</el-button>
            </div>
        </el-dialog>
        <p>商品分类</p>
        <el-tree
                :data="data"
                node-key="id"
                default-expand-all
                @node-click="clickCategory"
                :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
                  type="text"
                  size="mini"
                  @click="() => append(data)">
            Append
          </el-button>
          <el-button
                  type="text"
                  size="mini"
                  @click="() => remove(node, data)">
            Delete
          </el-button>
        </span>
      </span>
        </el-tree>
    </div>
</template>

<script>
    let id = 1000;

    export default {
        data() {
            return{
                data:[], //树节点数据
                brands:[],//所有品牌分类
                form:{id:0,name:"",parentId:0,isParent:0,selectedBrands:[]},//保存的分类数据
                dialogFormVisible:false,
                currentBrand:{id:0,name:""}, //当前选择的品牌
                categoryData:{}              //当前的分类
            }
        },

        methods: {
            //根据父分类加载子分类
            loadCategories(pid){
                this.$http.get("http://api.blb.com/api/goods-api/category/parent/"+pid)
                    .then(res => {
                        if(res.data.code == 1){
                            this.data = res.data.data;
                        }
                    });
            },
            //点击父分类后加载子分类 data是当前点击节点的数据
            clickCategory(data){
                this.$http.get("http://api.blb.com/api/goods-api/category/parent/"+data.id)
                    .then(res => {
                       if(res.data.code == 1){
                           //给当前节点添加children属性
                           this.$set(data,'children',res.data.data);
                       }
                    });
            },
            //加载所有品牌
            loadBrands(){
              this.$http.get("http://api.blb.com/api/goods-api/brand")
                  .then(res => {
                     if(res.data.code == 1){
                         this.brands = res.data.data;
                     }
                  });
            },
            //从下拉菜单选择品牌
            selectBrand(){
                //把当前选择的品牌放入选择品牌的数组中
                this.form.selectedBrands.push(this.currentBrand);
            },
            //点击append按钮，显示对话框
            append(data) {
                this.form.parentId = data.id;
                this.dialogFormVisible = true;
                this.categoryData = data;
            },
            //保存分类信息
            saveCategory(){
                this.$http.post("http://api.blb.com/api/goods-api/category",this.form)
                    .then(res => {
                       console.log(res);
                       if(res.data.code == 1){
                           if(!this.categoryData.children){
                               this.$set(this.categoryData,'children',[]);
                           }
                           this.categoryData.push(res.data.data);
                       }
                    });
                this.dialogFormVisible = false;
            },
            remove(node, data) {
                const parent = node.parent;
                const children = parent.data.children || parent.data;
                const index = children.findIndex(d => d.id === data.id);
                children.splice(index, 1);
            }
        },
        mounted() {
            this.loadCategories(0);
            this.loadBrands();
        }
    };
</script>

<style scoped>
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
</style>